<!-- 逻辑代码块-->
<script setup lang="ts">
// 导入
import { ref } from 'vue'
// 使用ref函数将普通数据转换为响应式数据

// 1.定义基本类型
const num = ref(0)
// 如果要在代码中修改数组，则需要通过.value
const changNum = () => {
  num.value++
}

// 2.定义复杂类型
const foods = ref(['炒饭', '炒蛋', '炒肉', '炒火腿'])
const changeFoods = () => {
  foods.value.push('炒菜')
}
</script>

<!-- 结构块:-->
<template>
  <div>
    <p @click="changNum">数字：{{ num }}</p>
    <p @click="changeFoods">食物：{{ foods }}</p>
  </div>
</template>

<!-- 样式块-->
<style scoped></style>
